<template>
<div class="panomarket">
  <!-- <Header :bgcolor="'rgba(0,0,0,.8)'" /> -->

  <div class="content">
    <!-- 顶部大图 -->
    <div class="pr top-banner">
      <!-- <img src="static/images/home/头部.jpg" alt="" style="width: 100%;"> -->
      <iframe :src="panoBanner" frameborder="0" style="width:100%;height:730px;"></iframe>
      <div class="pac top-banner-text">
        <p>换个视角看世界</p>
        <hr />
        <h3 class="huan">汇聚全球高品质正版授权全景图片</h3>
        <div class="search">
          <input placeholder="请输入关键字回车搜索" class="search-input" @keyup.enter="searchKeyword" v-model.trim="inputval">
          <i class="iconfont icon-sousuo search-icon" @click.stop="searchKeyword"></i>
        </div>
      </div>
    </div>

    <div class="module-show margin-xauto min-h1200">
      <!-- 分类标签 -->
      <div v-if="tags.length>0" class="product-tag flex">
        <div
          class="product-item hand"
          :style="tag.id == tagActive ? styleObj: ''"
          v-for="(tag, tagix) in tags"
          :key="tagix"
          @click="changeTag(tag)"
        >{{tag.name}}</div>
      </div>
      
      <PmarketList :list="list" v-if="list.length>0" />
      <div class="null tac" v-else>暂无数据</div>
    </div>

    <div class="module-show margin-xauto tac product-page">
      
      <el-pagination
        :total="count"
        v-if='count'
        @current-change="handlePageChange"
        :current-page.sync='opts.pageIndex'
        :page-size='opts.pageSize'
        size='small'
        background
        layout="total, prev, pager, next, jumper">
      </el-pagination>
    </div>

  </div>

  <Aside />
  <Footer />
</div>
</template>

<script>
export default {
  components: {
    Header: _ => import('@/components/common/Header'),
    Footer: _ => import('@/components/common/Footer'),
    PmarketList: _ => import('@/components/common/PmarketList'),
    Aside: _ => import('@/components/common/Aside'),
  },
  data() {
    return {
      panoBanner: '', // $globalconfig.MARKET_BANNER,
      inputval: '',
      styleObj: {
        borderColor: $globalconfig.THEME_COLOR,
        color: $globalconfig.THEME_COLOR,
      },
      opts: {
        pageIndex: 1,
        pageSize: 16,
        pano_type: -1,
        keyword: '',
      },
      tags: [],
      tagActive: -1,
      list: [],
      count: 0,
    }
  },
  created() {
    this.$api.getPanoUrl(2).then(res => {
      console.log(res)
      if (res.code == 100) {
        this.panoBanner = res.data[0].panoview_url
      }
    })
    this.getListPano()
    this.getTags()
  },
  methods: {
    // 搜索
    searchKeyword() {
      console.log(this.inputval)
      if (this.inputval) {
        this.opts.pano_type = -1
        this.opts.keyword = this.inputval
        this.getListPano()
      } else {
        this.$vgo.tip('请输入关键字搜索', 'warning')
      }
      
    },
    // 切换分类标签
    changeTag(item) {
      // console.log(item)
      this.opts.keyword = ''
      this.tagActive = item.id
      this.opts.pageIndex = 1
      this.opts.pano_type = item.id
      this.getListPano()
    },
    // 翻页
    handlePageChange(val) {
      this.getListPano()
    },
    // 获取全景列表
    getListPano() {
      this.$api.getPmarketList(this.opts).then(res => {
        if (res.code == 100) {
          if (res.data && res.data.list && res.data.list.length > 0) {
            this.list = res.data.list
            this.count = res.data.count
          } else {
            this.list = []
            this.count = 0
          }
        }
      })
    },
    // 获取tag
    getTags() {
      this.$api.getPmarketTags().then(res => {
        // console.log(res)
        if (res.code == 100) {
          res.data.unshift({name: '全部', id: -1})
          this.tags = res.data
        }
      })
    },
  }
}
</script>

<style lang="stylus" scoped>
.panomarket
  .content
    margin-top 52px
    .top-banner
      .top-banner-text
        width 750px
        p
          text-align center
          font-size 57px
          font-family PingFang SC
          font-weight bold
          color #FFFFFF
          text-shadow 0px -2px 5px rgba(0, 0, 0, 0.5)
          margin-bottom 20px
        hr
          height 4px
          width 440px
          border 0
          background-color #fff
          padding 0
          margin 0 auto
        .huan
          text-align center
          font-size 18px
          color #ffffff
          margin-top 10px
          margin-bottom 30px
        .search
          position relative
          .search-input
            font-size 18px
            padding-left 10px
            padding-right 35px
            border-radius 5px
            width 100%
            height 50px
            border none
            outline none
            color #666
          .search-icon
            position absolute
            right 10px
            top 9px
            font-size 22px

    .product-page
      padding-top 10px
      padding-bottom 50px
    .module-show
      width 1200px
      .product-tag
        margin-top 45px
        width 100%
        flex-wrap wrap
        .product-item
          width 16%
          height 50px
          text-align center
          line-height 50px
          border 1px solid #ddd
          color #999
          margin-bottom 15px
          margin-right 0.666666%
          &:hover
            background-color #f5f5f5
          .product-item:nth-child(6n)
            margin-right 0
</style>
